.banner{width:100%;background:url('http://img.xclient.info/img/banner.png');overflow:hidden;}
.banner b{display:block;margin:20px auto 0;text-align: center;color:#fff;font-size:28px;font-weight:normal;}

.banner.small{background:none;margin-top:20px;height:auto;}
.banner.small .container{background:url('http://img.xclient.info/img/banner.png');overflow:hidden;padding-bottom:20px;border-radius:10px;}

.site-search{margin:20px auto 0;}
#search {
  position:relative;
}
#search .input_wrap{
  display:block;
  margin-right:176px;
  background:#fff;
  height: 50px;
  border-radius: 3px;
}
#search input {
  height: 50px;
  border-radius: 3px;
  outline:none;
  border:none;
}
#search button {
  position:absolute;
  right:0;
  top:0;
  border:2px solid #363f48;
  padding:0;
  width:160px;
  height:50px;
  background:#363f48;
  direction:ltr;
  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
  border-radius: 3px;
  color:#fff;
  font-size:16px;
  outline:none;
}

#search button:hover{
  background:transparent;
}

.site-search{margin:20px auto 0;}

.filter{ padding: 20px 20px 10px; text-align: center; overflow: hidden;}
.filter a{background-color: #4eaade; transition: .5s; color: #fff; padding: 6px 10px; margin: 0 10px 10px 0; display: inline-block; border-radius: 5px;}
.filter a:hover{ background: #333;}
.column{ text-align: center;  }
.column .tit{ font-size: 22px; color: #777;  padding: 20px 0; display: block; position: relative; font-weight: 500; border-bottom: 2px solid #f6f6f6;margin-right: -15px;margin-left: -15px;}

/*.more{ position: absolute; right: 0; font-size: 14px; line-height: 35px; color: #4eaade;}*/
.post_list{padding: 0;}
.post_list li{ float: left; padding: 0px; transition: .5s ease-in-out;}
.post_list li img{ width: 120px; height: 160px; margin: 0 auto 10px; display: block; transform: translateZ(0); transition: all .4s ease;}
.post_list li .main{ position: relative;transition: all .5s ease; margin: 10px 10px; padding: 20px 10px 45px 10px; background: #fff;  }
.status_bar{ position: relative; height: 20px;}
.status_bar .item{ position: absolute; top: 0; height: 20px; line-height: 20px; color: #aaa; transition: all .4s ease;}
.status_bar .download{ left: 0;}
.status_bar .icon-download{ font-size: 22px; float: left; }
.status_bar .icon-download:after{    content: '\e605';}
.status_bar .data{ right: 0;}
.status_bar .icon-date{ font-size: 22px;   float: left; line-height: 22px;}
.post_list li .main .info{margin-top: 5px;}
.post_list li .main a{ display: block;}
.post_list li .info h3{ font-size: 14px; height: 44px; font-weight: normal; color: #333; line-height: 22px; overflow: hidden; text-align: left;}
.post_list li .info p{ font-size: 12px; height: 60px; line-height: 20px; overflow: hidden; color: #666;    display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical; text-align: left;}
.post_list li .main .keywords{ float: left;padding-top: 10px}
.post_list li .main .keywords a{ display: block; line-height: 18px;  font-size: 12px;  color: #fff; background: #4eaade; padding: 2px 8px; border-radius: 3px; float: left; margin-right: 5px;}

.mo{ height: 90px;}

.post_list li:hover{ transform: translateY(-5px); color: #fff; box-shadow:0px 5px 10px rgba(0,0,0,0.5);}
.post_list li:hover .main{ background: #363f48;}
.post_list li:hover .status_bar .icon-download{ color: #fff;}
.post_list li:hover .status_bar .icon-date{color: #fff;}
.post_list li:hover .info h3{ color: #fff; }
.post_list li:hover .info p{color: #fff;}
.post_list li:hover img{transform:rotate(5deg)}
